﻿<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"
    MasterPageFile="~site/_catalogs/masterpage/CustomApp.master" Language="C#" %>

<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
<asp:Content ID="Content1" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    <script type="text/javascript" src="/_layouts/15/sp.requestexecutor.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>

    <script type="text/javascript" src="../Scripts/ODATAQueryBuilder-1.1.0.js"></script>
        <script type="text/javascript" src="../Scripts/vkbeautify.0.99.00.beta.js"></script>

    <!-- http://aozora.github.com/bootmetro/index.html -->

    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />


</asp:Content>
<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server" ID="PlaceHolderPageTitleInTitleArea">
    ODATA Query Builder
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <table class="querybuilder-table">
        <tr class="querybuilder-header">
            <td>FROM</td>
        </tr>
        <tr>
            <td>
                <select id="selLists"></select>
            </td>
        </tr>

        <tr class="querybuilder-header">
            <td>SELECT</td>
        </tr>
        <tr id="select">
            <td>
                <div id="divAvailableFields" class="querybuilder-fields" style="float: left;">
                    <ul id="ulAvailableFields" class="querybuilder-selectablelist"></ul>
                </div>

                <div id="divAppRemoveButtons">
                    <button id="btnAdd" type="button">ADD</button><br />
                    <button id="btnRemove" type="button">REMOVE</button>
                </div>

                <div id="divSelectedFields" class="querybuilder-fields" style="float: right;">
                    <ul id="ulSelectedFields" class="querybuilder-selectablelist"></ul>
                </div>
            </td>
        </tr>
        <tr class="querybuilder-header" data-bind="visible: selectedFields().length > 0">
            <td>ORDER BY</td>
        </tr>
        <tr data-bind="visible: selectedFields().length > 0">
            <td>

                <table id="orderBy">
                    <thead>
                        <tr>
                            <th style="width: 300px"></th>
                            <th style="width: 100px"></th>
                            <th style="width: 200px"></th>
                        </tr>

                    </thead>
                    <tbody data-bind="foreach: orderByFields">
                        <tr>
                            <td>
                                <select data-bind="options: $root.availableFields, value: field, optionsText: 'internalName'"></select></td>
                            <td>
                                <select data-bind="options: $root.availableSortMethods, value: ascDesc, optionsText: 'title'"></select></td>
                            <td><a href="#" data-bind="click: $root.removeOrderByField">REMOVE</a></td>
                        </tr>
                    </tbody>
                </table>

                <button id="btnAddOrderBy" data-bind="click: addOrderByField, enable: orderByFields().length < 3">ADD ORDER BY</button>



            </td>
        </tr>

        <tr class="querybuilder-header" data-bind="visible: selectedFields().length > 0">
            <td>FILTER</td>
        </tr>
        <tr data-bind="visible: selectedFields().length > 0">
            <td>
                <table id="filter">
                    <thead>
                        <tr>
                            <th style="width: 300px"></th>
                            <th style="width: 100px"></th>
                            <th style="width: 150px"></th>
                            <th style="width: 150px"></th>
                        </tr>

                    </thead>
                    <tbody data-bind="foreach: filters">
                        <tr>
                            <td>
                                <select data-bind="options: $root.availableFields, value: field, optionsText: 'internalName'"></select></td>
                            <td>
                                <select data-bind="options: $root.operators, value: operator, optionsText: 'title'"></select></td>
                            <td>
                                <input type="text" data-bind="value: value" /></td>
                            <td><a href="#" data-bind="click: $root.removeFilter">REMOVE</a></td>
                        </tr>
                    </tbody>
                </table>

                <button id="btnAddFilter" data-bind="click: addFilter, enable: filters().length < 3">ADD FILTER</button>
            </td>
        </tr>
        <tr class="querybuilder-header" data-bind="visible: selectedFields().length > 0">
            <td>PAGING</td>
        </tr>
        <tr data-bind="visible: selectedFields().length > 0">
            <td>
                <table id="paging">
                    <thead>
                        <tr>
                            <th style="width: 200px"></th>
                            <th style="width: 200px"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Top
                                <input type="text" data-bind="value: top" /></td>
                            <td>Skip
                                <input type="text" data-bind="value: skip" /></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>


        <tr class="querybuilder-header" data-bind="visible: selectedFields().length > 0">
            <td>QUERY</td>
        </tr>
        <tr id="query" data-bind="visible: selectedFields().length > 0">
            <td>
                <textarea rows="5" cols="50" data-bind="value: queryString()" id="txtQueryString" ></textarea>
            </td>
        </tr>
        <tr class="querybuilder-header" id="results" data-bind="visible: selectedFields().length > 0">
            <td>RESULTS</td>
        </tr>
        <tr data-bind="visible: selectedFields().length > 0">
            <td>
                <label>
                    JSON
                    <input type="radio" name="format" value="json" data-bind="checked: format" />
                </label>
                <label>
                    XML
                    <input type="radio" name="format" value="xml" data-bind="checked: format" />
                </label>
                <div data-bind="html: results" id="divResults"></div>
                
            </td>
        </tr>


    </table>

</asp:Content>
